<template>
	<view class="container monitor-container">
		<!-- <view class="monitor-panel">
			<view class="monitor-top">
				<view class="monitor-title">
					<image class="addr-img" :src="$fileUrl+'地址.png'" mode="widthFix"></image>
					<text>{{selectMonitor.deviceName}}</text>
				</view>
				<view class="monitor-date">{{nowTimeStr}}</view>
			</view>
			<live-player :src="video.rtmp" mode="live" autoplay bindstatechange="statechange" binderror="error"
				style="width: 100%; height: 500rpx;" />
			<view class="action-box">
				<view class="action-btnbox">
					<view class="action-btn" @touchstart="ptzDirection(0,1)" @touchend="ptzDirection(0,0)"></view>
					<view class="action-mid">
						<view class="action-btn" @touchstart="ptzDirection(2,0)" @touchend="ptzDirection(0,0)"></view>
						<view class="action-btn" @touchstart="ptzDirection(1,0)" @touchend="ptzDirection(0,0)"></view>
					</view>
					<view class="action-btn" @touchstart="ptzDirection(0,2)" @touchend="ptzDirection(0,0)"></view>
					<view class="action-scalebox">
						<view class="action-scale" @touchstart="ptzscale(1)" @touchend="ptzscale(0)"></view>
						<view class="action-scale" @touchstart="ptzscale(2)" @touchend="ptzscale(0)"></view>
					</view>
				</view>
				<image class="monitor-img" :src="$fileUrl+'monitor.png?type=1'" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="class-list">
			<view class="yuan-btn btn-default" :class="selectLand===item.landId &&'active-btn'" v-for="item in landList"
				:key="item.landId" @click="selectLandFn(item)">
				<text class="iconfont">&#xe614;</text>
				<text>{{item.landName}}</text>
			</view>
		</view>
		<view class="monitor-list">
			<view class="m-list-box" v-for="(item,idx) in pageList" :key="item.deviceId" @click="changeMonitor(item)">
				<view class="m-list-bgbox">
					<text class="iconfont">&#xe631;</text>
					<image class="m-list-bg" :src="$resFileUrl+item.imgUrlFirst" mode="widthFix"></image>
				</view>

				<view class="m-list-title">
					<image class="addr-img" :src="$fileUrl+'地址.png'" mode="widthFix"></image>
					<text class="no-warp">{{item.deviceName}}</text>
				</view>
			</view>
		</view>
		<view class="not-more" v-if="isLoading">加载中...</view>
		<view class="null-page" v-else-if="pageList.length<=0 ">
			<text class="iconfont">&#xe642;</text>
			<view class="null-page-tips">暂无数据~</view>
		</view>
		<view class="not-more" v-else-if="notMore">没有更多了...</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { format, getStorage, hideLoading, showLoading, showToast, utilLogin } from '../../common/util';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import api from '../../common/api';
	const isLoading = ref(false)
	const pageList = ref([])
	const notMore = ref(true)
	const nowTimeStr=ref('')
	const classList = ref([
		//{ title: '全部', ico: '\ue701', icoColor: '#77CC17' },
		{ title: '土地专区', ico: '\ue614', icoColor: '#EE6F00' },
		{ title: '散养区', ico: '\ue6b0', icoColor: '#6FBAFC' },
		{ title: '露营地', ico: '\ue6cd', icoColor: '#DD52FA' },
	])
	const ptzDirection = async (leftRight, upDown) => {
		var data = {
			leftRight: leftRight,
			upDown: upDown,
			movespeed: 125,
			deviceId: video.value.deviceID,
			channelId: video.value.channelId
		}
		const res = await api.moveVideo(data)

	}
	const ptzscale = async (inOut) => {
		var data = {
			inOut,
			scalespeed: 30,
			deviceId: video.value.deviceID,
			channelId: video.value.channelId
		}
		const res = await api.scaleVideo(data)

	}
	const clickAction = (str : string) => {
		console.info(str)
	}
	const setNowTimeStr=()=>{
		const nowTime=new Date()
		const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
		nowTimeStr.value=format(nowTime,'yyyy年MM月dd日')+' '+weekdays[nowTime.getDay()]+ format(nowTime,' hh:mm:ss')
		setTimeout(()=>{
			setNowTimeStr()
		},1000)
	}
	onMounted(async () => {
		//setNowTimeStr()
		// 没有登录 提示登录
		let userAuth = getStorage('userAuth') || {}
		if (userAuth.userToken) {
			getLandList()
		} else {
			utilLogin((loginType : boolean) => {
				if (loginType) {
					//登录成功
					getLandList()
				}
			})
		}
	})
	const selectLand = ref('')
	const landList = ref([])
	const getLandList = async () => {
		showLoading()
		try {
			const res = await api.getVideoLand()
			landList.value = res.data
			selectLand.value = res.data[0].landId
			getPageList()
		} finally {
			hideLoading()
		}
	}
	const selectLandFn = (land) => {
		pageList.value = []
		selectLand.value = land.landId
		getPageList()
	}
	const video = ref<any>({})
	const getMonitor = async () => {
		showLoading()
		try {
			const data = selectMonitor.value?.children[0] || {}
			const res = await api.getMonitor(data.deviceSipId)
			const rows=res.rows || []
			const findOne=rows.find((item)=>{
				return item.status===3
			})
			if (findOne && findOne.channelSipId) {
				const videoRes = await api.getVideo(data.deviceSipId, findOne.channelSipId)
				let url=`/pages/monitor/monitorPlay`
				url+=`?url=${videoRes.data.flv}`
				url+=`&deviceId=${data.deviceSipId}`
				url+=`&channelId=${findOne.channelSipId}`
				url+=`&name=${selectMonitor.value.deviceName}`
				uni.navigateTo({ url: url })
				video.value = videoRes.data
			} else {
				video.value = {}
				showToast('没有可使用的监控')
			}


		} finally {
			hideLoading()
		}
	}
	const changeMonitor = (item) => {
		selectMonitor.value = item
		if (selectMonitor.value.deviceId) getMonitor()
	}
	const pageSize = 10
	const selectMonitor = ref<any>({})
	let pageNum = 1
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.getMonitorList({
				"deviceType": 3,
				landId: selectLand.value,
				pageNum,
				pageSize
			})
			if (res.rows.length < pageSize) notMore.value = true
			const dataRow = res.rows.map((item) => {
				return {
					...item,
					imgUrlFirst: item.imgUrl?.split(',')[0] || ''
				}
			})
			pageList.value = pageList.value.concat(dataRow)

			// if (!selectMonitor.value.deviceId) {
			// 	selectMonitor.value = pageList.value[0] || {}
			// 	if (selectMonitor.value.deviceId) getMonitor()
			// }
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})


	const statechange = (e) => {
		console.log('live-player code:', e.detail.code)
	}
	const error = (e) => {
		console.error('live-player error:', e.detail.errMsg)
	}
</script>

<style lang="scss">
	.monitor-container {
		padding: 20rpx;
		padding-bottom: 120rpx;

		.monitor-panel {
			background-color: #fff;
			border-radius: 14rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.08);
		}

		.monitor-top {
			padding: 20rpx;

		}

		.monitor-title {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #282828;
		}

		.addr-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}

		.monitor-date {
			margin-top: 15rpx;
			font-size: 26rpx;
			color: #8C8C8C;
		}

		.action-box {
			position: relative;
			text-align: center;
			padding: 20rpx 0;
		}

		.monitor-img {
			width: 300rpx;
			height: 300rpx;
			display: inline-block;
		}

		.monitor-big-img,
		.monitor-small-img {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 15rpx;
			z-index: 11;
		}

		.monitor-big-img {
			bottom: 85rpx;
		}

		.monitor-small-img {
			bottom: 15rpx;
		}

		.action-btnbox {
			position: absolute;
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto;
			left: -999px;
			right: -999px;
			z-index: 10
		}

		.action-mid {
			width: 100%;
			display: flex;
		}

		.action-btn {
			width: 100%;
			height: 100rpx;
		}

		.action-scalebox {
			position: absolute;
			left: -900rpx;
			right: -900rpx;
			margin: auto;
			top: -900px;
			bottom: -900px;
			height: 150rpx;
			width: 150rpx;
		}

		.action-scale {
			width: 150rpx;
			height: 75rpx;
		}


		.class-list {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow: auto;
			margin-top: 40rpx;

			.yuan-btn {
				display: inline-flex;
				height: 68rpx;
				border-radius: 68rpx;
				padding: 0 20rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				font-size: 26rpx;
			}

			.iconfont {
				margin-right: 15rpx;
				font-size: 30rpx;
			}

			.active-btn {
				background-color: #77CC17;
				color: #fff;

				.iconfont {
					color: #fff !important;
				}
			}
		}

		.monitor-list {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.m-list-box {
			width: 49%;
			display: inline-block;
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 10rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.08);
			border-radius: 6rpx;
		}

		.m-list-bgbox {
			position: relative;

			.iconfont {
				height: 100%;
				width: 100%;
				position: absolute;
				color: #fff;
				font-size: 66rpx;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.m-list-bg {
			width: 100%;
			height: 240rpx;
			border-radius: 14rpx;
		}

		.m-list-title {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #282828;
		}

		// <view class="monitor-list">
		// 	<view class="m-list-box" v-for="(item,idx) in 5" :key="idx">
		// 		<text class="iconfont">&#xe631;</text>
		// 		<image class="m-list-bg" :src="$fileUrl+'土地.png'" mode="widthFix"></image>
		// 		<view class="m-list-title">
		// 			<image class="addr-img" :src="$fileUrl+'地址.png'" mode="widthFix"></image>
		// 			<text>黑土地阳光有机蔬菜地</text>
		// 		</view>
		// 	</view>
		// </view>
	}
</style>